<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script type="text/javascript" src="../static/jquery/jquery-1.12.4.min.js"></script>
    <script type="text/JavaScript" src="../static/jquery/md5.js"></script>

    <style type="text/css">
        body {
            background: url("../static/image/bg1.jpg") no-repeat;
            background-size: cover;
            background-attachment: fixed;
            overflow: hidden;
        }

        .login_box {
            height: 300px;
            width: 520px;
            background: rgba(0, 0, 0, 0.25);
            margin: 200px auto;
            text-align: center;
        }

        .login_title {
            color: #ffffff;
            font: bold 22px/32px "Microsoft Sans Serif";
            padding-top: 20px;
        }

        .input_text {
            height: 40px;
            margin: 20px auto;
            width: 60%;
            border-radius: 8px;
        }

        .btn {
            height: 100%;
            width: 100%;
        }

        .input {
            height: 100%;
            width: 100%;
        }
    </style>

</head>
<body>
<div class="login_box">
    <div class="login_title">管 理 员 登 录</div>

    <form action="">
        <div class="input_text">
            <input type="text" class="input" name="username" id="username" placeholder="请输入账号">
        </div>
        <div class="input_text">
            <input type="password" class="input" name="password" id="password" placeholder="请输入密码">
        </div>
        <div class="input_text">
            <input type="button" class="btn" id="btn" value="点击登录">
        </div>
    </form>
</div>

<!--ajax实现数据交互-->
<script type="text/javascript">
    // 使用ajax技术实现登录，步骤分析：
    // 1.点击登录，触发登录请求的动作
    // 2.获取输入框的账号的密码
    // 3.对密码进行md5加密
    // 4.发送请求：post(ajax,可查看jquery文档)
    $('.btn').click(function () {
        // 获取账号,val() 获取元素的值
        var user = $('#username').val();
        // 获取密码
        var pwd = $('#password').val();
        // 对密码进行MD5加密,下载md5加密库
        var pwdMD5 = hex_md5(pwd);

        // 首先，判断账号和密码是否为空，为空则弹出提示，终止程序
        if (user ==='' || pwd ===''){
            alert('所有参数不能为空');
            // 结束这个程序的执行
            return
        }

        // 发送请求
        $.ajax({
            url: '/login',
            data:{user:user,pwd:pwdMD5},
            method:'post',
            //期望后台返回的数据类型
            dataType:'json'
            // 请求没有出错的情况下，会执行该函数，获取回调数据data
        }).done(function (data) {
            // 判断是否登录成功
            if (data.code ==='1') {
                // 若成功，即进行页面跳转
                window.location.href = '/index'
            }else {
                // 否则，弹出错误信息
                alert(data.msg)
            }
            // 请求返回了错误的HTTP状态码,会执行该函数
        }).fail(function (data) {
            alert('登录的url错误！')
            
        })

    })


</script>


</body>
</html>